import {classnames, designComponent, designPage, PropType, reactive, useRefs} from "@peryl/react-compose";
import './user-setting-page.scss';
import {$file, $message, AddressCascade, Button, Form, FormInput, FormItem, i18n, Icon, Input, InputGroup, PageCard, PageCardContent, Toggle} from "plain-design";

export default designPage(() => {

  const tabs: { title: string, icon: string, render: () => any }[] = [
    {
      title: i18n.$intl('page.userSettingPage.BasicSetting').d('基本设置'), icon: 'pi-settings', render: () => {
        return (
          <BasicSetting formData={state.formData}/>
        );
      }
    },
    {
      title: i18n.$intl('page.userSettingPage.SecuritySetting').d('安全设置'), icon: 'pi-safe', render: () => {
        return (
          <SecuritySetting formData={state.formData} options={i18n.$intl('page.userSettingPage.securityOptions').d('') as any}/>
        );
      }
    },
    {
      title: i18n.$intl('page.userSettingPage.Binding').d('账号绑定'), icon: 'pi-user-group', render: () => {
        return (
          <SecuritySetting formData={state.formData} options={i18n.$intl('page.userSettingPage.bindOptions').d('') as any}/>
        );
      }
    },
    {
      title: i18n.$intl('page.userSettingPage.Message').d('消息通知'), icon: 'pi-message', render: () => {
        return (
          <SecuritySetting formData={state.formData} options={i18n.$intl('page.userSettingPage.messageOptions').d('') as any}/>
        );
      }
    },
  ];

  const state = reactive({
    currentTab: tabs[0],
    formData: {
      email: 'martsforever@aliyun.com',
      name: 'peryl',
      selfDescription: 'A short self description',
      provinceVal: '340000',
      cityVal: '340700',
      districtVal: '340703',
      street: 'South Street',
      mobilePhonePrefix: '+86',
      mobilePhone: '18111111111',
    } as any,
  });

  return () => (
    <PageCard className="user-setting-page">
      <PageCardContent noPadding>
        <div className="user-setting-page-content">
          <div className="user-setting-page-side">
            {tabs.map(tab => (
              <div key={tab.title} onClick={() => {state.currentTab = tab;}} className={classnames([
                'user-setting-page-tab-item',
                {
                  'user-setting-page-tab-item-active': state.currentTab.title == tab.title
                }
              ])}>
                <Icon icon={tab.icon}/>
                <span>{tab.title}</span>
              </div>
            ))}
          </div>
          <div className="user-setting-page-body">
            <div className="user-setting-page-body-title">{state.currentTab.title}</div>
            {state.currentTab.render()}
          </div>
        </div>
      </PageCardContent>
    </PageCard>
  );
});

const BasicSetting = designComponent({
  props: {
    formData: { type: Object, required: true }
  },
  setup({ props }) {

    const { refs, onRef } = useRefs({ form: Form });

    const save = async () => {
      await refs.form?.validate();
      $message.success(i18n.$intl('page.formElementsPage.validatePass').d('校验通过'));
    };

    const uploadImage = async () => {
      const image = await $file.chooseImage();
      const imageDataUrl = await $file.readAsDataURL(image as File);
      props.formData.avatar = imageDataUrl;
    };

    return () => (
      <div className="user-setting-page-basic">
        <div className="user-setting-page-basic-left">
          <Form verticalLabel modelValue={props.formData} ref={onRef.form}>
            <FormInput
              required
              label={i18n.$intl('page.userSettingPage.basic.email').d("邮箱")}
              v-model={props.formData.email}
              placeholder={i18n.$intl('page.userSettingPage.basic.emailPlaceholder').d("请输入邮箱")}
            />
            <FormInput
              required
              label={i18n.$intl('page.userSettingPage.basic.name').d("昵称")}
              v-model={props.formData.name}
              placeholder={i18n.$intl('page.userSettingPage.basic.namePlaceholder').d("请输入昵称")}
            />
            <FormInput
              required
              textarea
              label={i18n.$intl('page.userSettingPage.basic.description').d("简介")}
              v-model={props.formData.selfDescription}
              placeholder={i18n.$intl('page.userSettingPage.basic.descriptionPlaceholder').d("请输入简介")}
            />
            <FormItem
              required
              label={i18n.$intl('page.userSettingPage.basic.location').d("籍贯")}
              field={"districtVal"}
            >
              <AddressCascade
                placeholder={i18n.$intl('page.userSettingPage.basic.locationPlaceholder').d("请选择地址")}
                v-model:province={props.formData.provinceVal}
                v-model:city={props.formData.cityVal}
                v-model:district={props.formData.districtVal}
              />
            </FormItem>
            <FormInput
              required
              label={i18n.$intl('page.userSettingPage.basic.street').d("街道")}
              placeholder={i18n.$intl('page.userSettingPage.basic.streetPlaceholder').d("请输入街道")}
              v-model={props.formData.street}
            />
            <FormItem
              required
              label={i18n.$intl('page.userSettingPage.basic.mobilePhone').d("联系电话")}
              field={"mobilePhone"}
            >
              <InputGroup>
                <Input v-model={props.formData.mobilePhonePrefix} placeholder={i18n.$intl('page.userSettingPage.basic.mobilePhonePrefix').d("区号")} width={100}/>
                <Input v-model={props.formData.mobilePhone} placeholder={i18n.$intl('page.userSettingPage.basic.mobilePhone').d("电话号码")} prefixIcon="pi-phone"/>
              </InputGroup>
            </FormItem>
            <FormItem label={null} contentAlign="center">
              <Button label={i18n.$intl('page.userSettingPage.basic.saveButton').d("更新基本信息")} mode="fill" onClick={save}/>
            </FormItem>
          </Form>
        </div>
        <div className="user-setting-page-basic-right">
          <div>
            {!!props.formData.avatar ? (
              <img src={props.formData.avatar}/>
            ) : (
              <Icon icon="pi-user"/>
            )}
            <Button label={i18n.$intl('page.userSettingPage.basic.avatarButton').d("上传头像")} icon="pi-upload" onClick={uploadImage}/>
          </div>
        </div>
      </div>
    );
  },
});

const SecuritySetting = designComponent({
  props: {
    formData: { type: Object, required: true },
    options: { type: Array as PropType<{ title: string, description: string, button: string, icon?: string, toggle?: string }[]>, required: true },
  },
  setup({ props }) {

    return () => (
      <div className="user-setting-page-security">
        {props.options.map(option => (
          <div className="user-setting-page-security-item" key={option.title}>
            {!!option.icon && (
              <div className="user-setting-page-security-item-icon"><Icon icon={option.icon}/></div>
            )}
            <div className="user-setting-page-security-item-label">
              <div>{option.title}</div>
              <div>{option.description}</div>
            </div>
            <div className="user-setting-page-security-item-operation">
              {option.button && (<span>{option.button}</span>)}
              {option.toggle != null && (<Toggle v-model={option.toggle} size="small"/>)}
            </div>
          </div>
        ))}
      </div>
    );
  },
});
